<template>
  <div class="box">
    <div class="content_box">
      <div style="
          font-size: 24px;
          color: #565656;
          text-align: center;
          padding: 60px 0 30px;
        ">
        请问需要什么<span style="color: #5a8bff;">帮助</span>？
      </div>
      <div style="text-align: center">
        <el-input placeholder="请输入"   prefix-icon="el-icon-search" style="width: 350px; margin: 0 5px; border-radius: 30px;" v-model="queryParams.title" @input="searchList" class="input-with-select">
        </el-input>
      </div>
      <div class="adds">
        <div style="font-weight: 700; color: #565656">文档导航</div>
        <el-button type="success" icon="el-icon-plus" style="float: right"  @click="handleAdd">添加</el-button>
      </div>
    </div>
    <div class="tabs">
      <div class="tables">
        <div class="tables_item" :class="queryParams.type === item.value ? 'tables_item_i' : ''" :key="item.value" @click="setType(item)" v-for="(item, index) in dict.type.ops_help_support_type">
          <img style="width: 20px; margin-right: 5px;" :src="require('@/assets/images/helpTab'+(index+1)+'.png')" alt="" />
          <div>{{item.label}}</div>
        </div>
      </div>
    </div>
    <div class="autos">
      <div v-show="tableData.length">
        <div class="left_title">
          <i style="color: #5a8bff; margin-right: 5px; font-size: 20px" class="el-icon-question"></i>
          <span style="font-weight: 700">常见问题</span>
        </div>
        <div style="padding: 20px;font-size: 16px">
          <div v-for="(item, index) in tableData" :key="index" style="border-bottom: 1px solid #eaeaea; padding: 15px 0">
            <div style="display: flex; justify-content: space-between">
              <div style="display: flex; align-items: center">
                <i class="el-icon-search icon_style"></i>
                <span>{{ item.title }}</span>
              </div>
              <div>
                <span style="margin-right: 10px; color: #9d9d9d">操作人：{{ item.uuser }}</span>
                <span style="margin-right: 40px; color: #9d9d9d">{{
                    item.utime
                  }}</span>
                <i @click="handleUpdate(item)" style="font-size: 16px; color: #5a8bff; cursor: pointer" class="el-icon-edit">
                </i>
                <i style="
                      margin: 0 10px;
                      font-size: 16px;
                      color: #fe5a57;
                      cursor: pointer;
                    " class="el-icon-delete" @click="handleDelete(item)">
                </i>
                <i @click="getShow(index)" style="
                      font-size: 16px;
                      color: #5a8bff;
                      border-radius: 50%;
                      border: 1px solid #5a8bff;
                      cursor: pointer;
                    " :class="{ xuanzhuan: showIndex === index }" class="el-icon-arrow-up">
                </i>
              </div>
            </div>
            <transition name="down">
              <div v-show="showIndex === index">
                <div style="
                      display: flex;
                      justify-content: space-between;
                      margin-top: 10px;
                    ">
                  <div style="display: flex; align-items: center; width: 100%">
                    <i class="el-icon-more icon_style1"></i>
                    <span style="
                          color: #909399;
                          width: calc(100% - 36px);
                          font-size: 16px;
                          word-wrap: break-word;
                          word-break: normal;
                          line-height: 22px;
                        " v-html="item.content"></span>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div v-show="tableData1.length">
        <div class="left_title">
          <i style="color: #5a8bff; margin-right: 5px; font-size: 20px" class="el-icon-question"></i>
          <span style="font-weight: 700">使用问题</span>
        </div>
        <div style="padding: 20px;font-size: 16px">
          <div v-for="(item, index) in tableData1" :key="index" style="border-bottom: 1px solid #eaeaea; padding: 15px 0">
            <div style="display: flex; justify-content: space-between">
              <div style="display: flex; align-items: center">
                <i class="el-icon-search icon_style"></i>
                <span>{{ item.title }}</span>
              </div>
              <div>
                <span style="margin-right: 10px; color: #9d9d9d">操作人：{{ item.uuser }}</span>
                <span style="margin-right: 40px; color: #9d9d9d">{{
                    item.utime
                  }}</span>
                <i @click="handleUpdate(item)" style="font-size: 16px; color: #5a8bff; cursor: pointer" class="el-icon-edit">
                </i>
                <i style="
                      margin: 0 10px;
                      font-size: 16px;
                      color: #fe5a57;
                      cursor: pointer;
                    " class="el-icon-delete" @click="handleDelete(item)">
                </i>
                <i @click="getShow1(index)" style="
                      font-size: 16px;
                      color: #5a8bff;
                      border-radius: 50%;
                      border: 1px solid #5a8bff;
                      cursor: pointer;
                    " :class="{ xuanzhuan: showIndex1 === index }" class="el-icon-arrow-up">
                </i>
              </div>
            </div>
            <transition name="down">
              <div v-show="showIndex1 === index">
                <div style="
                      display: flex;
                      justify-content: space-between;
                      margin-top: 10px;
                    ">
                  <div style="display: flex; align-items: center">
                    <i class="el-icon-more icon_style1"></i>
                    <span style="
                          color: #909399;
                          font-size: 16px;
                          line-height: 22px;
                        " v-html="item.content"></span>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div v-show="tableData2.length">
        <div class="left_title">
          <i style="color: #5a8bff; margin-right: 5px; font-size: 20px" class="el-icon-question"></i>
          <span style="font-weight: 700">新手教程</span>
        </div>
        <div style="padding: 20px;font-size: 16px">
          <div v-for="(item, index) in tableData2" :key="index" style="border-bottom: 1px solid #eaeaea; padding: 15px 0">
            <div style="display: flex; justify-content: space-between">
              <div style="display: flex; align-items: center">
                <i class="el-icon-search icon_style"></i>
                <span>{{ item.title }}</span>
              </div>
              <div>
                <span style="margin-right: 10px; color: #9d9d9d">操作人：{{ item.uuser }}</span>
                <span style="margin-right: 40px; color: #9d9d9d">{{
                    item.utime
                  }}</span>
                <i @click="handleUpdate(item)" style="font-size: 16px; color: #5a8bff; cursor: pointer" class="el-icon-edit">
                </i>
                <i style="
                      margin: 0 10px;
                      font-size: 16px;
                      color: #fe5a57;
                      cursor: pointer;
                    " class="el-icon-delete" @click="handleDelete(item)">
                </i>
                <i @click="getShow2(index)" style="
                      font-size: 16px;
                      color: #5a8bff;
                      border-radius: 50%;
                      border: 1px solid #5a8bff;
                      cursor: pointer;
                    " :class="{ xuanzhuan: showIndex2 === index }" class="el-icon-arrow-up">
                </i>
              </div>
            </div>
            <transition name="down">
              <div v-show="showIndex2 === index">
                <div style="
                      display: flex;
                      justify-content: space-between;
                      margin-top: 10px;
                    ">
                  <div style="display: flex; align-items: center">
                    <i class="el-icon-more icon_style1"></i>
                    <span style="
                          color: #909399;
                          font-size: 16px;
                          line-height: 22px;
                        " v-html="item.content"></span>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>
      <div v-show="!tableData.length && !tableData1.length && !tableData2.length ">
        <div style="text-align: center; padding: 50px">
          <img style="width: 300px" src="@/assets/images/helpKong.png" alt="" />
          <div style="margin-top: 20px; color: #ccc;">暂无数据</div>
        </div>
      </div>
    </div>
    <!--全屏 添加或修改参数配置对话框  -->
    <hu-modal :title="formData.id ? '修改-帮助' : '新增-帮助'" :show-modal.sync="showModal" :loading="MixinLoading" @submit="addFrom">
      <!-- tent sta -->
      <el-form ref="queryForm" :model="formData" :rules="rulesSon" label-width="80px">
        <el-form-item label="问题类型" prop="type">
          <el-select style="width: 100%" v-model="formData.type" placeholder="请选择问题类型">
            <el-option v-for="dict in dict.type.ops_help_support_type" :key="dict.value" :value="dict.value" :label="dict.label" />
          </el-select>
        </el-form-item>
        <el-form-item prop="title" label="问题标题">
          <el-input v-model="formData.title" placeholder="请输入问题标题" />
        </el-form-item>
        <el-form-item prop="content" label="问题描述">
          <editor v-model="formData.content" :minHeight="150"></editor>
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input v-model="formData.sort" type="number" placeholder="请输入序号" />
        </el-form-item>
      </el-form>
      <!-- tent end -->
    </hu-modal>
  </div>
</template>
<script>
// 富文本组件
import Editor from "@/components/Editor"
import * as http from "@/api/system/help";
export default {
  name: "HelpCentre",
  components: {
    Editor
  },
  dicts: ["ops_help_support_type"],
  data() {
    return {
      showIndex: undefined,
      showIndex1: undefined,
      showIndex2: undefined,
      MixinLoading: true, // 加载
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // total: 0, // table total
      tableData: [], // table Data
      tableData1: [], // table Data
      tableData2: [], // table Data
      showModal: false, // 弹窗
      // form Data
      formData: {
        id: undefined,
        title: undefined,
        content: undefined,
        type: undefined,
        grade: undefined,
        isTopping: 1,
        isOpen: 0,
      },
      pickerValue: undefined, // 时间
      // 表单校验
      rulesSon: {
        title: [
          { required: true, message: "问题标题不能为空", trigger: "blur" },
        ],
        content: [
          { required: true, message: "问题描述不能为空", trigger: "blur" },
        ],
        type: [
          { required: true, message: "问题类型不能为空", trigger: "change" },
        ],
        sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    setType(row) {
      this.queryParams.type = row.value;
      this.searchList();
    },
    getShow(row) {
      if (this.showIndex == row) {
        this.showIndex = undefined;
      } else {
        this.showIndex = row;
      }
    },
    getShow1(row) {
      if (this.showIndex1 == row) {
        this.showIndex1 = undefined;
      } else {
        this.showIndex1 = row;
      }
    },
    getShow2(row) {
      if (this.showIndex2 == row) {
        this.showIndex2 = undefined;
      } else {
        this.showIndex2 = row;
      }
    },
    // 列表 List
    getList() {
      this.MixinLoading = true;
      let params = {
        ...this.queryParams,
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.MixinLoading = false;
          this.tableData = result.records.filter((prams) => prams.type === 537);
          this.tableData1 = result.records.filter(
            (prams) => prams.type === 538
          );
          this.tableData2 = result.records.filter(
            (prams) => prams.type === 539
          );
        }
      });
    },
    // 查询 list
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 表单重置
    reset() {
      this.formData = {};
      this.resetForm("queryForm");
    },
    // add 弹出
    handleAdd() {
      this.reset();
      this.showModal = true;
    },
    // Update 弹出
    handleUpdate(row) {
      this.reset();
      this.formData = {
        id: row.id,
        title: row.title,
        content: row.content,
        type: row.type,
        sort: row.sort,
      };
      this.showModal = true;
    },
    // 提交
    addFrom() {
      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          this.MixinLoading = true;
          let params = {
            ...this.formData,
          };
          if (this.formData.id != undefined) {
            http
              .updateList(params)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.showModal = false;
                this.getList();
              })
              .finally(() => {
                this.MixinLoading = false;
              });
          } else {
            http
              .addList(params)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.showModal = false;
                this.searchList();
              })
              .finally(() => {
                this.MixinLoading = false;
              });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return http.deleteList(row.id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        });
    },
    // 搜索时间
    getPicker(arrDate) {
      this.queryParams.beginTime = arrDate ? arrDate[0] : undefined;
      this.queryParams.endTime = arrDate ? arrDate[1] : undefined;
    },
    // 删除勾选
    handleAllDelete() {
      if (!this.ids.length) return this.$modal.msg("请勾选表格");
      this.$modal
        .confirm("是否确认删除数据项？")
        .then(() => {
          return http.deleteListAll(this.ids.join(","));
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  margin: 0 20px;
  background: url("../../assets/images/holp_home.png") no-repeat;
  background-color: #eef7ff;
  .content_box {
    background-size: 100%;
    height: 250px;
    width: 100%;
    v-deep .el-input-group__append {
      border-color: #375ae4 !important;
      background-color: #375ae4 !important;
      color: #fff !important;
    }
  }
  .autos {
    width: 90%;
    background-color: #fff;
    margin: auto;
    box-shadow: 0px 0px 8px 0px rgba(55, 90, 228, 0.16);
    border-radius: 5px;
    .auto_title {
      text-align: center;
      padding: 30px;
      font-weight: 700;
      font-size: 16px;
    }
    .left_title {
      // overflow: hidden;
      padding-top: 10px;
      width: 190px;
      height: 60px;
      line-height: 60px;

      padding-left: 20px;
      font-size: 16px;
      display: flex;
      align-items: center;
      // background: #f2f5ff;
      // border-radius: 0px 30px 30px 0px;
    }
  }
  .icon_style {
    margin-right: 10px;
    background-color: #ff9900;
    width: 26px;
    border-radius: 5px;
    height: 26px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon_style1 {
    margin-right: 10px;
    background-color: #5a8bff;
    width: 26px;
    border-radius: 5px;
    height: 26px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .xuanzhuan {
    transform: rotate(180deg);
  }
  .adds {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.tabs {
  height: 100px;
  margin: auto;
  margin-top: -50px;
  margin-bottom: 20px;
  width: calc(90% + 20px);
  .tables {
    display: flex;
    justify-content: space-between;
    transition: 0.3s;
    .tables_item {
      cursor: pointer;
      transition: 0.3s;
      box-shadow: 0px 0px 8px 0px rgba(55, 90, 228, 0.16);
      flex: 1;
      background-color: #fff;
      padding: 30px 20px;
      color: #5a8bff;
      margin: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      background-color: #fff;
      &:hover {
        background-color: #fafdff;
      }
    }
  }
}
.tables_item_i {
  transition: 0.3s;
  color: #fff !important;
  background: linear-gradient(130deg, #ab93ff 0%, #5a8bff 100%);

  box-shadow: 0px 0px 8px 0px rgba(55, 90, 228, 0.16);
  img {
    filter: grayscale(100%) brightness(200%);
  }
}
</style>
